<template>
  <div id="pass_successful">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "PassSuccessful",
    props:{
      recoveriesData:{
        type: Array
      },
      recoveries:{
        type:Number
      }
    },
    mounted() {
      // const data = [{"Goals":0,"number":479},{"Goals":0.1,"number":2},{"Goals":0.2,"number":24},{"Goals":0.3,"number":31},{"Goals":0.4,"number":18},{"Goals":0.5,"number":12},{"Goals":0.6,"number":8},{"Goals":0.7,"number":4},{"Goals":0.8,"number":7},{"Goals":0.9,"number":5},{"Goals":1,"number":1},{"Goals":1.2,"number":1},{"Goals":1.3,"number":1},{"Goals":1.4,"number":1},{"Goals":1.5,"number":1},{"Goals":1.6,"number":1},{"Goals":1.7,"number":2},{"Goals":1.8,"number":1},{"Goals":3.6,"number":2},{"Goals":5.3,"number":1}];
      const data = [
        {
          "pa": 0,
          "number": 34
        },
        {
          "pa": 1,
          "number": 10
        },
        {
          "pa": 2,
          "number": 15
        },
        {
          "pa": 3,
          "number": 11
        },
        {
          "pa": 4,
          "number": 13
        },
        {
          "pa": 5,
          "number": 4
        },
        {
          "pa": 6,
          "number": 6
        },
        {
          "pa": 7,
          "number": 6
        },
        {
          "pa": 8,
          "number": 8
        },
        {
          "pa": 9,
          "number": 5
        },
        {
          "pa": 10,
          "number": 12
        },
        {
          "pa": 11,
          "number": 7
        },
        {
          "pa": 12,
          "number": 7
        },
        {
          "pa": 13,
          "number": 10
        },
        {
          "pa": 14,
          "number": 14
        },
        {
          "pa": 15,
          "number": 14
        },
        {
          "pa": 16,
          "number": 13
        },
        {
          "pa": 17,
          "number": 12
        },
        {
          "pa": 18,
          "number": 16
        },
        {
          "pa": 19,
          "number": 13
        },
        {
          "pa": 20,
          "number": 12
        },
        {
          "pa": 21,
          "number": 15
        },
        {
          "pa": 22,
          "number": 9
        },
        {
          "pa": 23,
          "number": 8
        },
        {
          "pa": 24,
          "number": 9
        },
        {
          "pa": 25,
          "number": 4
        },
        {
          "pa": 26,
          "number": 7
        },
        {
          "pa": 27,
          "number": 11
        },
        {
          "pa": 28,
          "number": 9
        },
        {
          "pa": 29,
          "number": 13
        },
        {
          "pa": 30,
          "number": 8
        },
        {
          "pa": 31,
          "number": 12
        },
        {
          "pa": 32,
          "number": 12
        },
        {
          "pa": 33,
          "number": 5
        },
        {
          "pa": 34,
          "number": 6
        },
        {
          "pa": 35,
          "number": 8
        },
        {
          "pa": 36,
          "number": 6
        },
        {
          "pa": 37,
          "number": 7
        },
        {
          "pa": 38,
          "number": 5
        },
        {
          "pa": 39,
          "number": 7
        },
        {
          "pa": 40,
          "number": 6
        },
        {
          "pa": 41,
          "number": 8
        },
        {
          "pa": 42,
          "number": 7
        },
        {
          "pa": 43,
          "number": 9
        },
        {
          "pa": 45,
          "number": 2
        },
        {
          "pa": 46,
          "number": 5
        },
        {
          "pa": 47,
          "number": 4
        },
        {
          "pa": 48,
          "number": 3
        },
        {
          "pa": 49,
          "number": 5
        },
        {
          "pa": 50,
          "number": 5
        },
        {
          "pa": 51,
          "number": 4
        },
        {
          "pa": 52,
          "number": 4
        },
        {
          "pa": 53,
          "number": 4
        },
        {
          "pa": 54,
          "number": 3
        },
        {
          "pa": 55,
          "number": 3
        },
        {
          "pa": 56,
          "number": 2
        },
        {
          "pa": 59,
          "number": 3
        },
        {
          "pa": 61,
          "number": 1
        },
        {
          "pa": 62,
          "number": 2
        },
        {
          "pa": 64,
          "number": 2
        },
        {
          "pa": 65,
          "number": 1
        },
        {
          "pa": 68,
          "number": 1
        },
        {
          "pa": 70,
          "number": 1
        },
        {
          "pa": 78,
          "number": 1
        },
        {
          "pa": 80,
          "number": 1
        },
        {
          "pa": 81,
          "number": 1
        }
      ]
      // const data = this.recoveriesData;
      const column = new Column('pass_successful', {
        data,
        width: 200,
        height: 150,
        // autoFit:false,
        xField: 'pa',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(pa)=>{
              if(pa==='81次') {
                return pa.slice(0,pa.length-1)
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
          grid:null,
        },
        meta:{
          pa: {
            alias:'成功总数',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        // maxColumnWidth: 20,
        title: {
          visible: true,
          text: '传球总数/90',
          style:{
            fontSize: 14,
            fill: 'red',
          }
        },
        // colorField: 'pa',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({pa})=>{
          if(pa === 19){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['pa','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
          position:'top',
          offset:40
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  #pass_successful {
    margin-top: -1px;
    width: 230px;
    height: 180px;
  }
</style>


